<template>
<el-container class="forum-container">
  <div>
    <div class="forum-left">
      <div class="detailBox tcommonBox">
        <header>
          <h1 style="text-align: center;font-size: 40px">{{forum.title}}</h1>
          <h4 style="display: flex;text-align: center">
            <div class="art-author"><i class="el-icon-user-solid"></i>: {{forum.username}}</div>
            <div class="art-time"><i class="el-icon-time"></i>：{{forum.create_time}}</div>
            <div class="art-classification"><i class="el-icon-s-flag"></i>：{{forum.type}}</div>
            <div class="art-view"><i class="el-icon-view"></i>{{forum.views}}</div>
            <div class="art-like"><img style="margin-right: 5px" width="15px" height="15px" src="../../assets/like.png">{{forum.mylike}}</div>
            <div><i class="el-icon-chat-dot-square"></i>0</div>
          </h4>
        </header>
        <div class="article-content" v-html="forum.content" style="margin-left: 10px"></div>
        <div style="display:inline;margin-left:10px;margin-top: 10px">
          <span>原创声明：{{forum.source===0?'转载':'原创'}}</span>
          <div v-show="forum.source===0 ? true:false" style="display: flex">
            <span style="margin-left:10px">原文链接：</span>
            <a :href="forum.source_url">{{forum.source_url}}</a>
          </div>
        </div>
      </div>
      <div style="text-align: center">
        <img @click="addLike" width="30px" height="30px" src="../../assets/reward.png">
      </div>
    </div>
    <div class="forum-comment">
      <W-ForumComment :Article_id=this.$route.params.id></W-ForumComment>
    </div>
  </div>
  <div class="forum-right">
    <W-ForumRight></W-ForumRight>
  </div>
</el-container>
</template>

<script>

import ForumRight from '../Forum/ForumRight'
import ForumComment from '../Forum/ForumComment'
export default {
  data () {
    return {
      id: this.$route.params.id,
      forum: {}
    }
  },
  components: {
    'W-ForumRight': ForumRight,
    'W-ForumComment': ForumComment
  },
  methods: {
    getForum () {
      this.$axios.get('forum/getForum', {
        params: {
          id: this.$route.params.id
        }
      }).then(response => {
        this.$set(this, 'forum', response.data.data)
      }).catch(error => {
        console.log(error)
      })
    },
    addViews () {
      this.$axios.post('forum/addViews', {
        id: this.$route.params.id
      }).then(response => {
      }).catch(error => {
        console.log(error)
      })
    },
    addLike () {
      this.$axios.post('forum/addLike', {
        id: this.$route.params.id
      }).then(response => {
        this.$message.success('恭喜您,点赞成功!')
      }).catch(error => {
        console.log(error)
      })
    }
  },
  mounted () {
    this.getForum()
    this.addViews()
  }
}
</script>

<style lang="less" scoped>
.detailBox{
  background-color: white;
}
.forum-container{
  display: flex;
  border-radius: 5px;
  margin-top: 20px;
}
.forum-left{
  margin-left: 127px;
  margin-right: 0px;
  margin-top: -40px;
  width: 950px;
}
.forum-right{
  margin-left: -30px;
  width: 900px;
}
.forum-comment{
  margin-left: 127px;
  width: 1000px;
}
.art-title {
padding-left: 5px;
cursor: pointer;
text-align: center;
}
.art-title:hover {
padding-left: 10px;
color: #409EFF;
}
.art-time {
margin-right: 20px;
}
.art-author {
margin-left: 10px;
margin-right: 20px;
}
.art-classification{
  margin-right: 20px;
}
.art-like{
  margin-right: 20px;
}
.art-view{
  margin-right: 20px;
}
.detailBox .article-content{
    font-size: 15px;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    overflow-x: hidden;
}
.detailBox .article-content p{
    margin:10px 0;
    line-height:24px;
    word-wrap: break-word;
    word-break: break-all;
    overflow-x: hidden;
}
.detailBox .article-content pre{
    word-wrap: break-word;
    word-break: break-all;
    overflow-x: hidden;
}
.detailBox .article-content img{
    max-width: 100%!important;
    height: auto!important;
    overflow-x: hidden;
}
.detailBox .article-content a{
    color:#df2050!important;
}
.detailBox .article-content a:hover{
    text-decoration: underline;
    color: #f00!important;
}
.detailBox .article-content i{
    font-style: italic;
}
.detailBox .article-content strong{
    font-weight: bold;
}
.detailBox .article-content ul{
    list-style-type: disc!important;
    list-style: disc!important;
    padding-left: 40px!important;
    li{
        list-style-type: disc!important;
        list-style: disc!important;
    }
}
.detailBox .article-content h1, .detailBox .article-content h2, .detailBox .article-content h3{
    font-size: 200%;
    font-weight: bold;
}
 .detailBox .article-content h4, .detailBox .article-content h5, .detailBox .article-content h6{
    font-size: 150%;
    font-weight: bold;
}
</style>
